<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js解释json数据</title>
</head>
<body>
<script>

    window.onload = function(){
        loadData();
    }

    // 使用原生javascript操作异步请求，将数据渲染到页面元素上
    function loadData(){
        // console.log("hello");

        var xhr = new XMLHttpRequest();
        xhr.open("get","jsonData");
        xhr.onreadystatechange=function(){
            if(xhr.status ===200){
                if(xhr.readyState===4){
                    // alert(xhr.responseText);
                    var obj = eval("("+xhr.responseText+")");
                    for(i=0;i<obj.data.length;i++){
                        var optionEle = document.createElement("option");
                        optionEle.setAttribute("value",obj.data[i].id);
                        optionEle.appendChild(document.createTextNode(obj.data[i].title));
                        document.getElementById("addr").appendChild(optionEle);
                    }
                }
            }
        }
        xhr.send(null);
    }
</script>

    <div id="data">
        地址是：<select id="addr"></select>
    </div>
</body>
</html>

